<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            height: 20px;
            /* border: 1px solid black; */
            margin: 0 auto;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            /* margin-bottom: 50px; */
        }

        .fi {
            width: 250px;
            height: 20px;
            border: 1px solid violet;
        }

        .inn {
            width: 50px;
            height: 20px;
            margin: 0 auto;
            /* border: 1px solid violet; */
            margin-top: 20px;
        }

        .fill-animation {
            width: 250px;
            /* 元素的宽度 */
            height: 20px;
            /* 元素的高度 */
            background: linear-gradient(to right, green 0%, green 100%);
            /* 初始背景，全绿色 */
            background-size: 0% 100%;
            /* 背景大小初始为0，即没有显示绿色 */
            background-repeat: no-repeat;
            /* 背景不重复 */
            animation: fill 2s forwards;
            /* 应用动画，持续2秒，动画结束后保持最终状态 */
        }
        @keyframes fill {
            0% {
                background-size: 0% 100%;
                /* 动画开始时背景大小为0 */
            }
            100% {
                background-size: 100% 100%;
                /* 动画结束时背景大小覆盖整个元素 */
            }
        }
        .fill-animation2 {
            width: 250px;
            /* 元素的宽度 */
            height: 20px;
            /* 元素的高度 */
            background: linear-gradient(to left, #ffffff 0%, #ffffff 100%);
            /* 初始背景，全绿色 */
            background-size: 0% 100%;
            /* 背景大小初始为0，即没有显示绿色 */
            background-repeat: no-repeat;
            /* 背景不重复 */
            animation: filt 2s forwards;
            /* 应用动画，持续2秒，动画结束后保持最终状态 */
        }
        @keyframes filt {
            0% {
                background-size: 0% 100%;
                /* 动画开始时背景大小为0 */
            }
            100% {
                background-size: 100% 100%;
                /* 动画结束时背景大小覆盖整个元素 */
            }
        }
    </style>
</head>

<body>
    <div class="box" id="tempo">
        <div id="box1" class="fi"></div>
        <div id="box2" class="fi"></div>
        <div id="box3" class="fi"></div>
        <div id="box4" class="fi"></div>
    </div>
    <div class="box">
        <span>第一部步</span>
        <span>第二部步</span>
        <span>第三部步</span>
        <span>第四部步</span>
    </div>
    <div class="inn">
        <span id="ins">内容</span>
    </div>
    <div class="box">
        <button id="up">上一步</button>
        <button id="down">下一步</button>
    </div>
</body>
<script>
    let tempo = 0
    let up = document.getElementById('up')
    let down = document.getElementById('down')
    down.onclick = function () {
        if (tempo < 4) {
            let ins = document.getElementById('ins')
            let box = document.getElementById('box' + (tempo + 1)).classList.add('fill-animation')
            tempo++;
            // let item = 1
            ins.textContent = `内容${tempo}`
        }
        if( tempo == 4){
            down.textContent = `完成`
        }
    }
    up.onclick = function () {
        let ins = document.getElementById('ins')
        let box = document.getElementById('box' + tempo ).classList.add('fill-animation2')
        tempo--;
        // let item = 1
        ins.textContent = `内容${tempo}`
        if( tempo < 4){
            down.textContent = `下一步`
        }
    }
</script>

</html>